<template>
  <div class="app-container">
    <el-card class="filter-container" shadow="never">
      <div>
        <i class="el-icon-search"></i>
        <span>筛选搜索</span>
        <el-button style="float: right" @click="searchBrandList()" type="primary" size="mini">查询结果</el-button>
      </div>
      <div style="margin-top: 15px">
        <el-form :inline="true" :model="listQuery" size="small" label-width="140px">
          <el-form-item label="配置搜索">
            <el-select v-model="value" placeholder="请选择" size="mini">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="输入搜索：">
            <el-input
              style="width: 203px"
              v-model="listQuery.keyword"
              placeholder="关键字"
              size="mini"
            ></el-input>
          </el-form-item>
        </el-form>
        <div style="display:flex">
          <ve-pie :data="chartData" height="300px" style="width:50%;height:300px"></ve-pie>
          <ve-line :data="chartData_1" height="300px" style="width:50%;height:300px"></ve-line>
        </div>
      </div>
    </el-card>
    <el-card class="operate-container" shadow="never">
      <i class="el-icon-tickets"></i>
      <span>数据列表</span>
    </el-card>
    <div class="table-container">
      <el-table
        v-loading="listLoading"
        ref="multipleTable"
        :data="tableData"
        style="width: 100%"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column type="expand" label="展开" align="center">
          <template slot-scope="props">
            <el-form inline class="demo-table-expand">
              <el-form-item label="乘车人姓名:">
                <span>{{ props.row.passengerName }}</span>
              </el-form-item>
              <el-form-item label="乘车人联系方式:">
                <span>{{ props.row.passengerContactInformation }}</span>
              </el-form-item>
              <el-form-item label="人数:">
                <span>{{ props.row.numberOfPeople }}</span>
              </el-form-item>
              <el-form-item label="行李件数:">
                <span>{{ props.row.numberOfLuggage }}</span>
              </el-form-item>
              <div>
                <el-form-item label="特殊要求:">
                  <span>{{ props.row.specialRequirements }}</span>
                </el-form-item>
              </div>
              <el-form-item label="乘车人备用联系方式:">
                <span>{{ props.row.alternateContact }}</span>
              </el-form-item>
              <div>
                <el-form-item label="用车日期:">
                  <span>{{ props.row.carDate }}</span>
                </el-form-item>
                <el-form-item label="用车时间:">
                  <span>{{ props.row.carTime }}</span>
                </el-form-item>
              </div>
              <el-form-item label="车型:">
                <span>{{ props.row.carModel }}</span>
              </el-form-item>
              <el-form-item label="订单类型:">
                <span>{{ props.row.orderType }}</span>
              </el-form-item>
              <el-form-item label="接驳类型:">
                <span>{{ props.row.typeOfConnection }}</span>
              </el-form-item>
              <div>
                <el-form-item label="上车点:">
                  <span>{{ props.row.pickUpPoint }}</span>
                </el-form-item>
                <el-form-item label="下车点:">
                  <span>{{ props.row.dropOffPoint }}</span>
                </el-form-item>
              </div>
              <el-form-item label="航班号/动车车次/班车号:">
                <span>{{ props.row.frequencyNum }}</span>
              </el-form-item>
            </el-form>
          </template>
        </el-table-column>
        <el-table-column prop="orderNumber" label="订单号" align="center"></el-table-column>
        <el-table-column prop="orderStatus" label="订单状态" align="center">
          <template slot-scope="scope">
            <el-tag type="danger" v-if="scope.row.orderStatus=='未处理'">未确认</el-tag>
            <el-tag type="success" v-else-if="scope.row.orderStatus=='已处理'">已确认</el-tag>
            <el-tag type="info" v-else>{{scope.row.orderStatus}}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="price" label="价格" align="center"></el-table-column>
        <el-table-column prop="orderPerson" label="下单人员" align="center"></el-table-column>
        <el-table-column prop="orderTime" label="下单日期" align="center"></el-table-column>
        <el-table-column prop="formStatus" label="表单状态" align="center">
          <template slot-scope="scope">
            <el-tag type="danger" v-if="scope.row.formStatus=='未到账'">未到账</el-tag>
            <el-tag type="success" v-else-if="scope.row.formStatus=='已到账'">已到账</el-tag>
            <el-tag type="info" v-else>{{scope.row.formStatus}}</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="200">
          <!-- <template slot-scope="scope">
            <el-button size="mini" @click="handleEdit(scope.$index, scope.row)" type="primary">详情</el-button>
          </template>-->
        </el-table-column>
      </el-table>
    </div>
    <div class="pagination-container">
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        layout="total, sizes,prev, pager, next,jumper"
        :page-size="listQuery.pageSize"
        :page-sizes="[5,10,15]"
        :current-page.sync="listQuery.pageNum"
        :total="total"
      ></el-pagination>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      json_fields: {
        订单号: "orderNumber",
        订单状态: "orderStatus",
        乘车人姓名: "passengerName",
        乘车人联系方式: "passengerContactInformation",
        人数: "numberOfPeople",
        行李件数: "numberOfLuggage",
        特殊要求: "specialRequirements",
        乘车人备用联系方式: "alternateContact",
        用车日期: "carDate",
        用车时间: "carTime",
        车型: "carModel",
        订单类型: "orderType",
        接驳类型: "typeOfConnection",
        上车点: "pickUpPoint",
        下车点: "dropOffPoint",
        "航班号/动车车次/班车号": "frequencyNum",
        价格: "price",
        下单人员: "orderPerson",
        下单日期: "orderTime"
      },
      listQuery: {
        keyword: null,
        pageNum: 1,
        pageSize: 10
      },
      listLoading: false,
      total: null,
      options: [
        {
          value: "1",
          label: "订单号"
        },
        {
          value: "2",
          label: "姓名"
        },
        {
          value: "3",
          label: "电话号码"
        },
        {
          value: "4",
          label: "渠道来源"
        },
        {
          value: "5",
          label: "订单状态"
        },
        {
          value: "6",
          label: "用车日期"
        },
        {
          value: "7",
          label: "表单状态"
        }
      ],
      value: "",
      tableData: [
        {
          orderNumber: "0010012",
          orderStatus: "未处理",
          passengerName: "带头",
          passengerContactInformation: "18875372539",
          alternateContact: "这个点话打不通",
          numberOfPeople: 5,
          numberOfLuggage: 5,
          specialRequirements: "加点米饭加点米饭",
          carDate: "2020-7-15",
          carTime: "17:25",
          carModel: "桑塔纳",
          orderType: "普通订单",
          typeOfConnection: "火车站回去",
          pickUpPoint: "重庆市重庆北站",
          dropOffPoint: "重庆市沙坪坝区",
          frequencyNum: "C919",
          orderPerson: "程序猿",
          orderTime: "2020-7-15 20:44",
          price: 86.5,
          formStatus: "未到账"
        }
      ],
      multipleSelection: [],
      chartData: {
        columns: ["标签", "未受理", "已结账", "未结账"],
        rows: [
          { 标签: "已受理", 未受理: 1393, 已结账: 1093, 未结账: 0.32 },
          { 标签: "未受理", 未受理: 3530, 已结账: 3230, 未结账: 0.26 },
          { 标签: "已结账", 未受理: 2923, 已结账: 2623, 未结账: 0.76 },
          { 标签: "未结账", 未受理: 1723, 已结账: 1423, 未结账: 0.49 }
        ]
      },
      chartData_1: {
        columns: ["日期", "增长率"],
        rows: [
          { 日期: "1月", 增长率: 0.32 },
          { 日期: "2月", 增长率: 0.26 },
          { 日期: "3月", 增长率: 0.36 },
          { 日期: "4月", 增长率: 0.46 },
          { 日期: "5月", 增长率: 0.66 },
          { 日期: "6月", 增长率: 0.46 },
          { 日期: "7月", 增长率: 0.66 }
        ]
      }
    };
  },
  mounted() {},
  methods: {
    toggleSelection(rows) {
      if (rows) {
        rows.forEach(row => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    getList() {
      this.listLoading = true;
      this.listLoading = false;
      // fetchList(this.listQuery).then(response => {
      //   this.listLoading = false;
      //   this.list = response.data.list;
      //   this.total = response.data.total;
      //   this.totalPage = response.data.totalPage;
      //   this.pageSize = response.data.pageSize;
      // });
    },
    handleSizeChange(val) {
      this.listQuery.pageNum = 1;
      this.listQuery.pageSize = val;
      this.getList();
    },
    handleCurrentChange(val) {
      this.listQuery.pageNum = val;
      this.getList();
    },
    searchBrandList() {
      this.listQuery.pageNum = 1;
      this.getList();
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePreview(file) {
      console.log(file);
    },
    handleExceed(files, fileList) {
      this.$message.warning(
        `当前限制选择 3 个文件，本次选择了 ${
          files.length
        } 个文件，共选择了 ${files.length + fileList.length} 个文件`
      );
    },
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`);
    },
    addOrder() {
      this.$router.push({ path: "/add" });
    },
    handleEdit(row, info) {
      this.$router.push({ path: "/update" });
    },
    handleClick(item) {
      if (item.status == 0) {
        this.$message({
          message: "已成功转发到司机端",
          type: "success"
        });
      } else if (item.status == 1) {
        this.$message({
          message: "已成功转发到用户端",
          type: "success"
        });
      } else {
        this.$message({
          message: "已成功转发到管理员端",
          type: "success"
        });
      }
    }
  }
};
</script>
<style scoped>
</style>
